<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<!-- 购物车抽屉 -->
<div th:fragment="user-center-modal">
    <!-- 用户中心弹窗 -->
    <div id="userCenterModal" class="user-center-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>个人中心</h3>
                <span class="close-btn">&times;</span>
            </div>
            <div class="modal-body">
                <div class="tabs">
                    <button class="tab active" data-tab="info">个人信息</button>
                    <button class="tab" data-tab="password">修改密码</button>
                </div>

                <!-- 个人信息面板 -->
                <div id="infoPanel" class="tab-panel active" data-tab="info">
                    <form id="userInfoForm">
                        <div class="avatar-upload">
                            <input type="file" id="avatarInput" accept="image/*" class="hidden-file-input">
                            <label for="avatarInput" class="avatar-label">
                                <img id="avatarPreview" alt="头像">
                                <span class="edit-icon">✎</span>
                            </label>
                        </div>
                        <div class="form-group">
                            <input type="text" name="userName" placeholder="用户名" required>
                        </div>
                        <div class="form-group">
                            <input type="tel" name="phonenumber" placeholder="联系电话" required>
                        </div>
                        <div class="form-group">
                            <input type="email" name="email" placeholder="邮箱地址">
                        </div>
                        <div class="form-group gender-group">
                            <label>
                                <input type="radio" name="sex" value="0">
                                <span class="male">男</span>
                            </label>
                            <label>
                                <input type="radio" name="sex" value="1">
                                <span class="female">女</span>
                            </label>
                        </div>
                        <button type="submit" class="save-btn">保存信息</button>
                    </form>
                </div>

                <!-- 修改密码面板 -->
                <div id="passwordPanel" class="tab-panel" data-tab="password">
                    <form id="passwordForm">
                        <div class="form-group">
                            <i class="icon-lock"></i>
                            <input type="password" name="oldPassword" placeholder="旧密码" required>
                        </div>
                        <div class="form-group">
                            <i class="icon-lock"></i>
                            <input type="password" name="newPassword" placeholder="新密码" required>
                        </div>
                        <div class="form-group">
                            <i class="icon-lock"></i>
                            <input type="password" name="confirmPassword" placeholder="确认密码" required>
                        </div>
                        <button type="submit" class="save-btn">修改密码</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>